<template>
  <div class="inspect-add" style="height: 100%">
    <div class="inspectCon" style="height: calc(100% - 50px);
    width: 100%;
    overflow: auto;">
      <div v-show="typeLayout == 'map'" style="height: 100%">
        <div class="areaSelect">
          <div style="margin-right: 10px">{{ $t("area.Layer") }}</div>
          <treeselect
            v-model="mapValue"
            :placeholder="$t('area.Layer')"
            :max-height="300"
            :options="mapList"
            :clearable="false"
            @input="handleMapChange"
          />
        </div>
        <div id="mapbox">
          <div id="map" />
          <div class="positiondiv"><span /></div>
          <div class="scalediv"><span /></div>
        </div>
      </div>

      <div v-show="typeLayout == 'detail'" style="height：100%;">
        <el-form
          ref="insForm"
          :rules="insRules"
          :model="insForm"
          label-width="100px"
        >
          <!--围栏名称-->
          <el-row>
            <el-col :span="8">
              <el-form-item
                :label="$t('inspection.inspectionName')"
                prop="pollingName"
              >
                <el-input
                  v-filterTxt
                  v-model="insForm.pollingName"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="22" class="inspectionTime">
              <el-form-item
                style="max-width: 400px"
                :label="$t('inspection.inspectionPeriod')"
                prop="pollingName"
              >
                <el-input-number
                  v-model="insForm.intervalPeriod"
                  :min="0"
                  :step="5"
                />
                <!-- <el-input
                v-model="insForm.intervalPeriod"
              /> -->
                <span style="font-size: 16px"> min</span>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <!--巡检时间-->
              <el-form-item :label="$t('inspection.inspectionTime')">
                <el-time-picker
                  v-model="insForm.timeStart"
                  editable
                  value-format="HH:mm"
                  format="HH:mm"
                  :placeholder="$t('operating.StartTime')"
                />
                <span>{{ $t("operating.line") }}</span>
                <el-time-picker
                  v-model="insForm.timeEnd"
                  editable
                  width="120"
                  value-format="HH:mm"
                  format="HH:mm"
                  :placeholder="$t('operating.EndTime')"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item
                :label="$t('inspection.inspectionResidenceTime')"
                prop="pollingDuration"
              >
                <el-input-number
                  v-model="insForm.pollingDuration"
                  :min="0"
                  :step="5"
                /><span style="font-size: 16px"> s</span>
              </el-form-item>
            </el-col>

            <el-col :span="20">
              <!--巡检周期-->
              <el-form-item :label="$t('inspection.inspectionCircle')">
                <div class="check-inspect-row">
                  <el-checkbox
                    v-model="checkAll"
                    style="margin-right: 15px"
                    :indeterminate="isIndeterminate"
                    @change="handleCheckAllChange"
                    >{{ $t("operating.checkAll") }}</el-checkbox
                  >

                  <el-checkbox-group
                    v-model="checkedWeeks"
                    @change="handleWeek"
                  >
                    <el-checkbox
                      v-for="week in cweekDays"
                      :key="week.name"
                      :label="week.name"
                      >{{ week.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <!--巡检人员-->
          <el-row>
            <el-col :span="22">
              <el-form-item :label="$t('inspection.peopleData')">
                <el-radio-group v-model="radioType" @change="changeRadioType">
                  <el-radio :label="true">{{ $t("common.cstaff") }}</el-radio>
                  <el-radio :label="false">{{ $t("common.cdept") }}</el-radio>
                </el-radio-group>
                <!-- 人员树 -->
                <tree-transfer
                  v-show="radioType"
                  filter
                  open-all
                  :filter-placeholder="$t('operating.pleaseWrite')"
                  :title="$t('alarm.peopleTitle')"
                  :from_data="peopleData"
                  :to_data="toPeopleData"
                  node-key="id"
                  :default-checked-keys="defaultCheckedPeople"
                  default-transfer
                  :placeholder="$t('Notice.keywordFiltering')"
                  :default-props="{ label: 'label' }"
                  @addBtn="addPeople"
                  @removeBtn="removePeople"
                />
                <!-- 部门树 -->
                <tree-transfer
                  v-show="!radioType"
                  :filter="true"
                  open-all
                  :filter-placeholder="$t('operating.pleaseWrite')"
                  :title="$t('alarm.deptTitle')"
                  :from_data="deptData"
                  :to_data="toDeptData"
                  node-key="id"
                  :default-checked-keys="defaultCheckedDept"
                  default-transfer
                  :default-props="{ label: 'label' }"
                  :placeholder="$t('Notice.keywordFiltering')"
                  @addBtn="addDept"
                  @removeBtn="removeDept"
                />
              </el-form-item>
            </el-col>
            <el-col :span="21">
              <!--是否启用该任务-->
              <el-form-item :label="$t('operating.isEnable')">
                <el-switch
                  v-model="insForm.enable"
                  inactive-value="0"
                  active-value="1"
                  active-color="#ffc000"
                  inactive-color="#dcdfe6"
                />
              </el-form-item>
            </el-col>
            <el-col :span="21">
              <!--添加巡检点按钮-->
              <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                class="changeBtn"
                size="mini"
                @click="addInpectPoint()"
                >{{ $t("operating.buttonXun") }}</el-button
              >
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <div v-show="fenceList.length > 0">
                <el-table :data="fenceList" style="width: 90%; margin: auto">
                  <el-table-column
                    prop="fenceName"
                    :label="$t('inspection.fenceName')"
                  />
                  <el-table-column
                    prop="timeStart"
                    :label="$t('inspection.beiginTime')"
                  />
                  <el-table-column
                    prop="timeEnd"
                    :label="$t('inspection.endTime')"
                  />
                  <el-table-column
                    prop="leastPersonNum"
                    :label="$t('inspection.lowPeople')"
                  />
                  <!--操作-->
                  <el-table-column
                    :label="$t('operating.operating')"
                    fixed="right"
                    width="380"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="upDownMove(scope.$index, scope.row, 'up')"
                        >{{ $t("inspection.upMove") }}</el-button
                      >
                      <el-button
                        size="mini"
                        @click="upDownMove(scope.$index, scope.row, 'down')"
                        >{{ $t("inspection.downMove") }}</el-button
                      >

                      <el-button
                        size="mini"
                        @click="handleOnecompile(scope.$index, scope.row)"
                        >{{ $t("operating.handle") }}</el-button
                      >
                      <el-button
                        size="mini"
                        @click="handleOneEdit(scope.$index, scope.row)"
                        >{{ $t("inspection.addSee") }}</el-button
                      >
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleOneDelete(scope.$index, scope.row)"
                        >{{ $t("operating.delete") }}</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div style="text-align: right; padding: 10px 85px 0 0">
      <div style="display: inline-block">
        <el-button type="primary" size="mini" @click="saveInspect">{{
          $t("operating.determine")
        }}</el-button>
        <el-button size="mini" @click="backInspect">{{
          $t("operating.cancel")
        }}</el-button>
      </div>
    </div>

    <!--新增监控区域-->
    <el-dialog
      width="30%"
      :title="$t('inspection.MonitoringAreaSettings')"
      :close-on-click-modal="false"
      :visible.sync="isCamera"
      append-to-body
    >
      <el-form ref="cameraForm" label-width="120px">
        <!--绑定摄像头-->
        <el-form-item :label="$t('inspection.BindingCamera')">
          <el-select
            v-model="cameraForm.cameraId"
            :multiple="true"
            filterable
            :placeholder="$t('Notice.bindingCamera')"
            style="max-width: 215px"
          >
            <el-option
              v-for="item in cameraList"
              :key="item.idx"
              :label="item.cameraName"
              :value="item.idx"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!--操作-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveCamera">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="closeDialog">{{ $t("operating.cancel") }}</el-button>
      </span>
    </el-dialog>

    <!-- 选择巡检点时间人员选择弹框 -->
    <el-dialog
      :title="$t('operating.prompt')"
      :close-on-click-modal="false"
      :visible.sync="isInspectPoint"
      width="500px"
    >
      <el-form ref="fencePointForm" label-width="120px">
        <!--开始时间-->
        <el-form-item :label="$t('inspection.beiginTime')">
          <el-time-picker
            v-model="fencePointForm.timeStart"
            editable
            value-format="HH:mm"
            format="HH:mm"
            :placeholder="$t('operating.StartTime')"
            style="width: 300px"
          />
        </el-form-item>
        <!--结束时间-->
        <el-form-item :label="$t('inspection.endTime')">
          <el-time-picker
            v-model="fencePointForm.timeEnd"
            editable
            value-format="HH:mm"
            format="HH:mm"
            :placeholder="$t('operating.EndTime')"
            style="width: 300px"
          />
        </el-form-item>
        <!-- 最低巡检人数 -->
        <el-form-item :label="$t('inspection.lowPeople')">
          <el-input-number
            v-model="fencePointForm.leastPersonNum"
            :min="1"
            :max="toPeopleDataTwo.length"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="saveInspectPoint">{{
          $t("operating.determine")
        }}</el-button>
        <el-button size="mini" @click="closeInspectPoint">{{
          $t("operating.cancel")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  CameraList,
  getMapTree,
  inspectionList,
  staffTrees,
  getDeptTree,
  staffTree,
  getMap,
  deletePolling,
  addPolling,
  findOnePolling,
} from "@/api/cy.js";
import { listDept } from "@/api/system/dept";
import {
  Load_Map,
  Load_Fence,
  _TransPixel,
  TagStyle,
  _dPR,
  _iMap,
  t,
  FenceLayer,
  FenceSource,
  releaseFence,
  LoadTypeData,
  sendThis,
} from "@/utils/iMap.js";
import { Select } from "ol/interaction.js";
import treeTransfer from "@/components/TransferExtend";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { baseUrl } from "@/utils/global.js";
export default {
  components: { treeTransfer, Treeselect },
  data() {
    return {
      pollingNameForm: "",
      typeLayout: "detail", // 布局类型：map与detail
      insRules: {},
      insForm: {
        pollingName: "",
        intervalPeriod: "30",
        timeStart: "",
        timeEnd: "",
        cycle: "", // 周期
        enable: "1",
        pollingFences: [],
        pollingDuration: 30,
      }, // 表单
      mapValue: null, // 选择地图
      mapList: [], // 地图列表
      oldMapId: null,
      mapId: null,
      selectPointerMove: null,
      fenceList: [],
      pointFence: "", // 巡检点参数

      typePoint: "", // 巡检点添加编辑分类
      checkAll: false, // 日期全选
      isIndeterminate: true, // 日期非全选
      checkedWeeks: this.$t("alarm.defaultChecked"),
      cweekDays: this.$t("common.cweekdays"),

      radioType: true,
      title: ["人员列表", "已选择人员"],
      peopleData: [], // 人员列表
      toPeopleData: [], // 已选人员
      toPeopleDataTwo: [],
      defaultCheckedPeople: [],

      // 部门
      deptData: [], // 部门列表
      toDeptData: [], // 已选部门
      toDeptDataTwo: [],
      defaultCheckedDept: [], // 默认选择部门
      // 巡检添加人员
      fencePointForm: {
        fenceId: "",
        fenceName: "",
        timeStart: "11:00",
        timeEnd: "12:00",
        leastPersonNum: 1,
      },
      isInspectPoint: false,
      cameraForm: { cameraId: [] },
      isCamera: false,
      cameraList: [],
      isAddCamera: false, // 是否添加监控
      selectIndex: "", // 删除
      pollingIdx: null, // 编辑巡检idx
    };
  },
  mounted() {
    this.staffTree([]); // 获取人员树
    this.deptTree([]); // 获取部门
    this.getCameraList(); // 监控设备
    this.initMap();
    this.compareWeek();
  },
  methods: {
    closeInspectPoint() {
      this.isInspectPoint = false;
      this.clearSelect();
    },

    handleEdit(index, row) {
      this.toPeopleDataTwo = [];
      this.toPeopleData = [];
      this.toDeptData = [];
      this.toDeptDataTwo = [];
      this.checkedWeeks = [];
      this.fenceList = [];
      this.pollingIdx = row.idx;
      findOnePolling(row.idx).then((res) => {
        const RES = this.responseUse(res);
        this.insForm.pollingName = RES.pollingName;
        this.insForm.intervalPeriod = RES.intervalPeriod;
        this.insForm.enable = RES.enable.toString();
        this.insForm.pollingDuration = RES.pollingDuration;
        this.insForm.timeStart = RES.timeStart;
        this.insForm.timeEnd = RES.timeEnd;
        if (RES.personnelList) {
          this.staffTree(RES.personnelList.split(","));
          this.radioType = true;
        } else {
          this.staffTree();
          // this.toPeopleDataTwo = []
        }
        if (RES.departmentList) {
          this.deptTree(RES.departmentList.split(","));
          this.radioType = false;
        } else {
          this.deptTree();
          // this.toDeptDataTwo = []
        }
        this.fenceList = RES.pollingFences;
        if (RES.cycle) {
          const cycleArr = RES.cycle.split(",");

          for (let j = 0; j < cycleArr.length; j++) {
            if (cycleArr[j] == 1) {
              this.checkedWeeks.push(this.cweekDays[j].name);
            }
          }
          this.compareWeek();
        }
      });
    },

    closeDialog() {
      // _iMap.removeInteraction(this.selectPointerMove)
      this.isCamera = false;
      this.fenceSelect();
      this.staffTree([]);
      this.deptTree([]);
    },
    saveCamera() {
      this.fenceList[this.selectIndex]["bandCameraList"] =
        this.cameraForm.cameraId + "";
      this.v_MyMessage(this.$t("Notice.fenceBindingSucceeded"), "success");
      this.isCamera = false;
      this.cameraForm = { cameraId: [] };
    },
    getCameraList() {
      CameraList().then((res) => {
        const RES = this.responseUse(res);
        this.cameraList = RES;
      });
    },
    saveInspectPoint() {
      var isDay = this.compareTime(
        this.fencePointForm.timeStart,
        this.fencePointForm.timeEnd
      );
      if (isDay) {
        this.$message.info(this.$i18n.t("common.compareTime"));
        return;
      }

      if (this.typePoint === "add") {
        // var isDay = this.compareTime(this.fencePointForm.timeStart, this.fencePointForm.timeEnd)
        // if (isDay) {
        //   this.$message.info('开始时间不能超过结束时间')
        //   return
        // }
        this.fenceList.push({
          fenceId: this.pointFence.get("id"),
          fenceName: this.pointFence.get("name"),
          timeStart: this.fencePointForm.timeStart,
          timeEnd: this.fencePointForm.timeEnd,
          leastPersonNum: this.fencePointForm.leastPersonNum,
        });
      } else {
        for (let i = 0; i < this.fenceList.length; i++) {
          if (this.fencePointForm.fenceId == this.fenceList[i].fenceId) {
            this.fenceList[i].timeStart = this.fencePointForm.timeStart;
            this.fenceList[i].timeEnd = this.fencePointForm.timeEnd;
            this.fenceList[i].leastPersonNum =
              this.fencePointForm.leastPersonNum;
          }
        }
      }
      this.typeLayout = "detail";
      this.isInspectPoint = false;
      this.fencePointForm = {
        fenceId: "",
        fenceName: "",
        timeStart: "11:00",
        timeEnd: "12:00",
        leastPersonNum: 1,
      };
    },

    compareTime(t1, t2) {
      if (!(t1 && t2)) {
        this.$message.info(this.$i18n.t("common.notime"));
        return;
      }
      const date = new Date();
      const a = t1.split(":");
      const b = t2.split(":");
      return (
        date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]) ||
        date.setHours(a[0], a[1]) == date.setHours(b[0], b[1])
      );
    },

    // 上下移动
    upDownMove(index, row, type) {
      if (type === "up" && index !== 0) {
        const item = this.fenceList[index - 1];
        this.fenceList[index - 1] = this.fenceList[index];
        this.fenceList[index] = item;
        // 操作数组,便于刷新表格
        this.fenceList.push(row);
        this.fenceList.pop();
      } else if (type === "down" && index !== this.fenceList.length - 1) {
        const item = this.fenceList[index];
        this.fenceList[index] = this.fenceList[index + 1];
        this.fenceList[index + 1] = item;
        this.fenceList.push(row);
        this.fenceList.pop();
      }
    },
    // 巡检点编辑
    handleOnecompile(index, row) {
      this.typePoint = "edit";
      this.fencePointForm.fenceId = row.fenceId;
      this.fencePointForm.fenceName = row.fenceName;
      this.fencePointForm.timeStart = row.timeStart;
      this.fencePointForm.timeEnd = row.timeEnd;
      this.fencePointForm.leastPersonNum = row.leastPersonNum;
      this.isInspectPoint = true;
    },
    handleOneEdit(index, row) {
      this.isCamera = true;
      this.selectIndex = index;
      if (
        row.bandCameraList != "" &&
        row.bandCameraList != undefined &&
        row.bandCameraList != null
      ) {
        this.cameraForm = {
          cameraId: row.bandCameraList.split(",").map(Number),
        };
      } else {
        this.cameraForm = { cameraId: [] };
      }
    },
    handleOneDelete(index, row) {
      this.fenceList.splice(index, 1);
    },
    // 添加巡检点按钮
    addInpectPoint() {
      if (this.toPeopleDataTwo.length == 0 && this.toDeptDataTwo.length == 0) {
        this.v_MyMessage(this.$t("Notice.chiocePeople"), "warning");
      } else {
        this.typeLayout = "map";
        this.handleMapChange();
        this.clearSelect();
      }
    },
    // 保存
    saveInspect() {
      const isDay = this.compareTime(
        this.insForm.timeStart,
        this.insForm.timeEnd
      );
      if (isDay) {
        this.$message.info("巡检时间的开始时间必须小于结束时间");
        return;
      }
      const datas = [];
      for (let i = 0; i < this.fenceList.length; i++) {
        datas.push({
          bandCameraList: this.fenceList[i].bandCameraList, // 监控摄像头
          fenceId: this.fenceList[i].fenceId,
          timeStart: this.fenceList[i].timeStart,
          timeEnd: this.fenceList[i].timeEnd,
          leastPersonNum: this.fenceList[i].leastPersonNum,
          curIndex: i,
        });
      }
      if (datas.length > 0) {
        this.insForm.pollingFences = datas;
      }
      if (this.radioType) {
        this.insForm["personnelList"] = this.toPeopleDataTwo.join(",");
      } else {
        this.insForm["departmentList"] = this.toDeptDataTwo.join(",");
      }
      if (
        this.pollingIdx != null ||
        this.pollingIdx != "" ||
        this.pollingIdx != undefined
      ) {
        this.insForm["idx"] = this.pollingIdx;
      }

      addPolling(this.insForm).then((res) => {
        const RES = this.responseUse(res, true);
        this.clearInsForm();
        this.$emit("changeShow", true);
      });
    },
    clearInsForm() {
      this.staffTree([]);
      this.deptTree([]);
      this.fenceList = [];

      this.insForm = {
        pollingName: "",
        intervalPeriod: "",
        timeStart: "",
        timeEnd: "",
        cycle: "",
        enable: "1",
        pollingFences: [],
        pollingDuration: 30,
      };
      this.toPeopleData = [];
      this.toPeopleDataTwo = [];
      this.defaultCheckedPeople = [];
      this.defaultCheckedDept = [];
      this.toDeptData = [];
      this.toDeptDataTwo = [];
      this.isIndeterminate = true;
      this.checkedWeeks = this.$i18n.t("alarm.defaultChecked");
      this.compareWeek();
      this.fencePointForm = {
        fenceId: "",
        fenceName: "",
        timeStart: "11:00",
        timeEnd: "12:00",
        leastPersonNum: 1,
      };
    },
    // 返回
    backInspect() {
      if (this.typeLayout === "map") {
        this.typeLayout = "detail";
        // this.mapValue = ''
      } else {
        this.clearInsForm();
        this.$emit("changeShow", true);
      }
    },

    initMap() {
      getMapTree().then((res) => {
        const RES = this.responseUse(res);
        this.mapList = RES;
        this.mapValue = RES[0].id;
      });
    },
    // 切换图层
    handleMapChange() {
      this.selectPointerMove = null;
      if (this.mapValue === "" || this.mapValue === undefined) {
        this.v_MyMessage(this.$t("Notice.mapIDIsEmpty"), "error");
        return false;
      } else {
        if (this.oldMapId != this.mapValue) {
          getMap(this.mapValue).then((res) => {
            const RES = this.responseUse(res);
            this.mapName = RES.mapName;
            Load_Map(
              baseUrl + "/file" + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            );
            this.Geo =
              "/system/fenceInfo/findListByFenceTypeGeoJson?fenceType=polling&layerId=" +
              this.mapValue;
            releaseFence();
            Load_Fence(this.Geo);
            this.fenceSelect();
          });
        }
      }
    },

    handleCheckAllChange(val) {
      this.checkedWeeks = val
        ? this.cweekDays.map((item) => {
            return item.name;
          })
        : [];
      this.isIndeterminate = false;
      this.compareWeek();
    },
    handleWeek(value) {
      this.checkAll = value.length === this.cweekDays.length;
      this.isIndeterminate =
        value.length > 0 && value.length < this.cweekDays.length;
      this.compareWeek();
    },
    // 巡检周期
    compareWeek() {
      const cycleList = [];
      for (let i = 0; i < this.cweekDays.length; i++) {
        if (this.checkedWeeks.indexOf(this.cweekDays[i].name) > -1) {
          cycleList.push(1);
        } else {
          cycleList.push(0);
        }
      }
      this.insForm.cycle = cycleList.toString();
    },
    // 清空选择
    clearSelect() {
      if (this.selectPointerMove) {
        this.selectPointerMove.getFeatures().clear();
      }
    },

    //  选择围栏
    fenceSelect() {
      const self = this;
      self.selectPointerMove = new Select();
      _iMap.addInteraction(self.selectPointerMove);
      self.selectPointerMove.on("select", function (e) {
        if (e.selected.length > 0) {
          // 鼠标移入，选择了一个，大概是mouseover事件
          // self.staffTree();
          e.selected.forEach((f) => {
            let result = true;
            self.fenceList.forEach((item) => {
              if (item.fenceId == f.get("id")) {
                result = false;
              }
            });
            if (result) {
              // self.fenceList.push({ fenceId: f.get('id'), fenceName: f.get('name'),beiginTime: self.form.startTime,endTime:self.form.endTime})
              self.pointFence = f;
              self.isInspectPoint = true; // 点击巡检点出现弹框
              self.typePoint = "add";
            } else {
              self.v_MyMessage(self.$t("Notice.fenceAlreadyExists"), "warning");
              self.typeLayout = "map";
            }
          });
        }
      });
    },

    // 监听穿梭框组件添加
    addPeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes;
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          this.toPeopleDataTwo.push(objPeople[i].id);
        }
      }
    },
    // 监听穿梭框组件移除
    removePeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes;
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          for (let k = 0; k < this.toPeopleDataTwo.length; k++) {
            if (objPeople[i].id == this.toPeopleDataTwo[k]) {
              this.toPeopleDataTwo.splice(k, 1);
            }
          }
        }
      }
    },

    addDept(from, to, obj) {
      const deptObj = obj.nodes;
      for (let i = 0; i < deptObj.length; i++) {
        if (
          deptObj[i].children == undefined ||
          deptObj[i].children.length == 0
        ) {
          this.toDeptDataTwo.push(deptObj[i].deptId);
        }
      }
    },

    removeDept(from, to, obj) {
      const deptObj = obj.nodes;
      for (let i = 0; i < deptObj.length; i++) {
        if (
          deptObj[i].children == undefined ||
          deptObj[i].children.length == 0
        ) {
          for (let k = 0; k < this.toDeptDataTwo.length; k++) {
            if (deptObj[i].deptId == this.toDeptDataTwo[k]) {
              this.toDeptDataTwo.splice(k, 1);
            }
          }
        }
      }
    },
    staffTree(data) {
      staffTree(this.mapValue).then((res) => {
        const RES = this.responseUse(res);
        this.peopleData = RES;
        if (data && data.length > 0) {
          this.defaultCheckedPeople = data;
        }
      });
    },

    // 最新部门能组织
    deptTree(defaultData) {
      listDept().then((item) => {
        item.data.map((res) => {
          res.label = res.deptName;
          res.disabled = false;
          res.id = res.deptId;
          res.pid = res.parentId;
        });
        this.deptData = this.handleTree(item.data, "deptId");
        if (defaultData && defaultData.length > 0) {
          this.defaultCheckedDept = defaultData;
        }
      });
    },

    changeRadioType(e) {
      // console.log('我的查看内容', e, this.radioType)
      // if (this.radioType) {
      //   this.toPeopleDataTwo = []
      // } else {
      //   this.toDeptDataTwo = []
      // }
    },
  },
};
</script>

<style scoped>
#body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.areaSelect {
  align-items: baseline;
  position: absolute;
  right: 17px;
  width: 300px;
  margin-top: 0;
  z-index: 2000;
  display: flex;
  height: 45px;
}

.handle-box {
  background-color: #939e89;
  padding: 10px;
  margin-bottom: 10px;
  min-width: 950px;
}
.buttonRt {
  float: right;
}
.clear {
  clear: both;
}

.crumbs {
  margin: 25px 0;
}
span {
  margin-left: 0px;
  font-size: 13px;
}
.datalist {
  width: 100%;
  min-width: 1150px;
}

.fenceTable {
  width: 300px;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  top: 175px;
  right: 17px;
}
.changeBtn {
  width: 120px;
  margin-top: 5px;
  margin-right: 17px;
  margin-bottom: 10px;
  margin-left: 10px;
  z-index: 9999;
  /* float: right; */
}
.changeBtn >>> i {
  font-size: 16px;
}
.vue-treeselect {
  width: 190px;
  display: inline-block;
  top: 8px;
}

#mapbox {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}

.inspect-add {
  height: 100%;
}
.inspect-title {
  color: rgb(61, 59, 59);
  margin-left: 30px;
}
.check-inspect-row {
  display: flex;
}

#map >>> .ol-control.ol-zoom {
  left: 0.5rem;
  top: 0.5rem;
  position: absolute;
}
#map >>> .ol-zoom.ol-unselectable.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: #fff;
  font-size: 1.14em;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: 0.4em;
  background-color: rgba(0, 60, 136, 0.5);
  border: none;
}

#map >>> .ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.25s linear, visibility 0s linear 0.25s;
  transition: opacity 0.25s linear, visibility 0s linear 0.25s;
}

#map >>> .ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: #fff;
  font-size: 1.14em;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: 0.4em;
  background-color: rgba(0, 60, 136, 0.5);
  border: none;
  border-radius: 2px;
}
.inspect-add .inspectionTime /deep/ .el-form-item__content {
  display: flex;
}
</style>
